<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>Employer</title>
    <script type = "text/javascript" src="/js/jquery-3.1.1.min.js"></script>
    <script type = "text/javascript" src="/js/vue.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="myApp">

    <el-form :inline="true" class="demo-form-inline">

        <el-form-item label="产品名">
            <el-input  placeholder="产品名" v-model="query.productName"></el-input>
        </el-form-item>

        <el-form-item label="产品类别">
            <el-select v-model="query.productType" placeholder="产品类别">
                <el-option label="------" value=""></el-option>
                <el-option label="个人" value="0"></el-option>
                <el-option label="企业"  value="1"></el-option>
            </el-select>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
            <el-button type="primary" @click="addPage" icon="el-icon-plus" v-if="role==1">新增</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%">
        <el-table-column label="产品编号" prop="productId"></el-table-column>
        <el-table-column label="产品名" prop="productName"></el-table-column>
        <el-table-column label="产品类别" prop="productType">
            <template slot-scope="y">
                <el-tag type="danger" v-if="y.row.productType==0">个人版</el-tag>
                <el-tag v-if="y.row.productType==1">企业版</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="产品定价" prop="productValue"></el-table-column>
        <el-table-column label="操作" >
            <template slot-scope="x">
                <el-button type="primary" icon="el-icon-edit" circle @click="updatePage(x.row)" v-if="role==1"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="del(x.row)" v-if="role==1"></el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[3, 5, 7, 10]"
            :page-size="query.row"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <el-dialog
            title="产品新增"
            :visible.sync="addShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">

            <el-form-item label="产品名">
                <el-input  v-model="parameter.productName" ></el-input>
            </el-form-item>

            <el-form-item label="产品类别">
                <el-select   v-model="parameter.productType" placeholder="请选择产品类别">
                    <el-option label="个人版" value="0"></el-option>
                    <el-option label="企业版" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="产品定价">
                <el-input v-model="parameter.productValue" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="add">新增</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


    <!--用户修改的对话框-->
    <el-dialog
            title="产品修改"
            :visible.sync="updateShow"
            width="30%"
    >
        <el-form ref="form"  label-width="80px">

            <el-form-item label="产品ID">
                <el-input v-model="parameterUpdate.productId" disabled="true"></el-input>
            </el-form-item>

            <el-form-item label="产品名">
                <el-input  v-model="parameterUpdate.productName" ></el-input>
            </el-form-item>

            <el-form-item label="产品类别">
                <el-select   v-model="parameterUpdate.productType" placeholder="请选择类别">
                    <el-option label="个人版" value="0"></el-option>
                    <el-option label="企业版" value="1"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="产品价值">
                <el-input v-model="parameterUpdate.productValue" ></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="update">修改</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

</body>
<script>
    //创建vue对象
    new Vue({
        el:"#myApp",//作用页面的范围
        data:{ //数据模型
            parameter:{
                productId:"",
                productName:"",
                productType:"",
                productValue:""
            },
            parameterUpdate:{//请求参数对象
                productId:"",
                productName:"",
                productType:"",
                productValue:""
            },
            query:{
                productName:"",
                productType:"",
                page:1,
                row:3
            },
            total:0,
            list:[],
            addShow:false,
            updateShow:false,
            role:""
        },
        methods:{//函数，方法
            handleSizeChange(row){
                this.query.page = 1;
                this.query.row=row;
                this.queryData();
            },
            handleCurrentChange(page) {
                this.query.page=page;
                this.queryData();
            },
            del(obj){
                const self = this;
                this.$confirm("你一定要删除吗","提示").then(function () {
                    $.ajax({
                        url: "/product/del",
                        data: {"id":obj.productId},//参数
                        success: function (rs) {
                            if (rs.code == 200) {
                                //刷新数据
                                self.queryData();
                            } else {
                                //提示
                                self.$alert(rs.msg);
                            }
                        }
                    })
                })
            },
            add(){//新增操作
                //把vue对象传递一个变量self
                const self = this;
                $.ajax({
                    url:"/product/add",
                    data:this.parameter,//参数
                    success:function (rs) {
                        if(rs.code==200){
                            //关闭新增对话框
                            self.addShow = false;
                            //刷新数据
                            self.queryData();
                        } else{
                            //提示
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            addPage(){//新增对话框
                //打开新增对话框
                this.addShow = true;
            },
            update(){
                const self = this;
                $.ajax({
                    url:"/product/update",//服务器接口地址
                    type: "post",
                    data:JSON.stringify(this.parameterUpdate),
                    contentType: "application/json",
                    success:function (rs) {//成功访问到服务器后执行的函数，rs ：服务端传来的数据
                        //打印信息
                        console.log(rs);
                        if(rs.code==200){
                            self.updateShow = false;
                            self.queryData();
                        }else{
                            self.$alert(rs.msg);
                        }
                    }
                })
            },
            updatePage(obj){//修改对话框
                this.parameterUpdate = obj;
                this.updateShow = true;
            },
            queryData(){//用户查询
                //把vue对象传递一个变量self
                const self = this;
                //发送ajax请求，来获取服务端返回的数据
                $.ajax({
                    url:"/product/query",//服务器接口地址
                    data:this.query,
                    success:function (rs) {//成功访问到服务器后执行的函数，rs ：服务端传来的数据
                        //打印信息
                        console.log(rs);
                        if(rs.code==200){
                            self.list = rs.data.list;
                            self.total = rs.data.total;
                        }else{
                            self.$message(rs.msg);
                            //清空
                            self.list =[]
                        }
                    }
                })
            }
        },
        mounted(){//生命周期函数，页面加载完毕就会执行函数
            //访问查询函数
            this.queryData();
            this.role = sessionStorage.getItem("role");
            console.log("=="+this.role);
        }

    })

</script>

</html>
